<template lang="html">
    <div class="index">
        <ul class="function-list" :style="{left: showFuncList + 'rem'}">
            <router-link :to="{ name: 'rememberBigThingList' }">
                <li><i class="iconfont icon-xinqingyiban-yuan"></i><span>心情管理</span></li>
            </router-link>
            <router-link :to="{ name: 'rememberDiaryList' }">
                <li><i class="iconfont icon-cb-chengchangriji"></i><span>日记</span></li>
            </router-link>
        </ul>
        <div class="header">
            <div class="left" @click="openFuncList">
                <i class="iconfont icon-27CIRCLE"></i>
            </div>
            <span class="">时间块</span>
            <div class="time-icon" @click="opentimePicker">
                <i class="iconfont icon-jishiben"></i>
            </div>
        </div>
        <div class="body">
            <div class="time-info">
                <p class="month">{{dataInfo.month}}</p>
                <p class="day">{{dataInfo.date}}</p>
                <p class="month">{{dataInfo.week}}</p>
            </div>
            <div class="plan-list">
                <div v-for="(item,index) in planList"  class="item" :key="index" >
                    <div class="index" v-if="index % 2 === 0">{{index / 2}}</div>
                    <div class="plan-block" @click="setPlanType(index)" :style="{background: item}"></div>
                </div>
            </div>
            <div class="plan-type">
                <button
                    v-for="(item, index) in eventTypes"
                    :key="index" class="item"
                    :style="{background: '#' + item.rgb}"
                    @click="setCurSelectType(item.id)"
                >{{item.name}}</button>

                <div class="current-select">
                    <span>当前选择：</span>
                </div>
                <button class="item" :style="{background: '#' + curSelectType.rgb}">{{curSelectType.name}}</button>
                <div class="current-select function-wrapper" @click="addEvent">
                    <span>添加事件</span>
                </div>
                <div class="current-select function-wrapper" @click="arrange">
                    <span>安排一下</span>
                </div>
            </div>
        </div>
        <van-popup v-model="show" position="bottom" style="height:3.5rem;padding-top:0.3rem;">
            <!-- 密码输入框 -->
            <van-password-input
                :value="password"
                info="密码为 6 位数字"
                @focus="showKeyboard = true"
            />

            <!-- 数字键盘 -->
            <van-number-keyboard
                :key="'myNumberKeyboard'"
                extra-key="."
                :show="showKeyboard"
                @input="onInput"
                @delete="onDelete"
                @blur="showKeyboard = false"
            />
        </van-popup>
        <tabbar />
        <confirm v-model="showSetSth"
            :closeOnConfirm="false"
            class="confirm-wrapper"
            title="添加任务"
            @on-confirm="toSetTimeThing">
            <x-input placeholder="任务所需时间块" v-model="taskInfo.planNum"></x-input>
            <x-textarea placeholder="任务详情" v-model="taskInfo.toSetThing"></x-textarea>
        </confirm>
    </div>
</template>

<script>
import { Datetime } from 'vux'
import { XButton, Confirm, XTextarea, XInput } from 'vux'
// import { Popup, PasswordInput, NumberKeyboard } from 'vant';
import Popup from 'vant/lib/popup';
import PasswordInput from 'vant/lib/password-input';
import NumberKeyboard from 'vant/lib/number-keyboard';
import Toast from 'vant/lib/toast';
import Tabbar from './base/tabbar'
export default {
    data(){
        return {
            selected: '首页',
            curTime: new Date(),
            defaultBgc: '#D6D8DD',
            plans: [],
            password: '',
            eventTypes: [],
            curSelectType: {},
            showFuncList: '-1',
            show: false,
            showKeyboard: true,
            showSetSth: false,
            showSetSthIndex: -1,
            taskInfo: {
                planNum: '',
                toSetThing: ''
            }
        }
    },
    components: {
        Datetime,
        XButton,
        Confirm,
        XTextarea,
        XInput,
        Tabbar,
        vanPopup: Popup,
        vanPasswordInput: PasswordInput,
        vanNumberKeyboard: NumberKeyboard
    },
    methods: {
        opentimePicker(){
            const _this = this
            this.$vux.datetime.show({
                value: '', // 其他参数同 props
                confirmText: '确定',
                cancelText: '取消',
                onHide () {
                    if (this.value) {
                        _this.$api.post('/plan/get-plan-list', {
                            searchTime: this.value,
                        }).then(res => {
                            _this.plans = res
                        })
                        let transDate = this.value.split('-')
                        console.log('转换之前的时间', this.value, transDate)
                        _this.curTime = new Date(transDate[0], Number(transDate[1])-1, transDate[2], '00', '00', '00')
                        console.log('转换过后的TIME', _this.curTime)
                    }
                },
                onShow () {
                    // const _this = this
                }
            })
        },
        selectedTime(){
            console.log(this.curTime);
        },
        getMonthChinese(num){
            let res = [
                '一',
                '二',
                '三',
                '四',
                '五',
                '六',
                '七',
                '八',
                '九',
                '十',
                '十一',
                '十二'
            ]
            return res[num]
        },
        getWeekChinese(num){
            let res = [
                '周一',
                '周二',
                '周三',
                '周四',
                '周五',
                '周六',
                '周日'
            ]
            return res[num]
        },
        setCurSelectType(id){
            if (id > 0) {
                this.eventTypes.forEach(item => {
                    if (item.id === id) {
                        this.curSelectType = item
                    }
                })
            }
        },
        /**
         * @function 显示设置要做的事情的弹框或者设置当前eventId
         */
        setPlanType(index){
            if (this.curSelectType.type === 'arrange') {
                // this.showSetSth = true
                // this.showSetSthIndex = index
                // let curSelectPlan = this.plans.find(item => Number(item.index) === index)
                // this.toSetThing = curSelectPlan ? curSelectPlan.thing : ''
                this.setPlanInfo('/plan/get-plan-thing', {planId: index}).then(res => {
                    this.taskInfo.toSetThing = res.content
                    this.taskInfo.planNum = res.plan_num
                    this.showSetSth = true
                })
            } else if (this.curSelectType.id) {
                this.setPlanInfo('/plan/set-plan', {
                    planId: index,
                    eventId: this.curSelectType.id
                }).then(res => {
                    this.$vux.toast.show({
                        text: '设置成功！'
                    })
                    this.$set(this.plans, index, {
                        index: index,
                        eventId: this.curSelectType.id
                    })
                })
            }
        },
        setPlanInfo (api, param) {
            let reqData = {
                curTime: Number(this.curTime) / 1000 | 0,
                ...param
            }
            return this.$api.post(api, reqData)
        },
        initData(){
            this.$vux.loading.show({
                text: '加载中'
            })
            this.$api.get('/plan/index').then(res => {
                this.$vux.loading.hide()
                if (res) {
                    this.plans = res.plan
                    this.eventTypes = res.type
                }
            }).catch(e => {
                this.$vux.loading.hide()
            })
        },
        addEvent(){
            this.$router.push({
                path: '/eventType/index'
            })
        },
        openFuncList(){
            this.show = !this.show
            this.password = ''
            this.showKeyboard = true
        },
        openFuncListDoor(){
            if (this.showFuncList === '.02') {
                this.showFuncList = '-1'
            }else{
                this.showFuncList = '.02'
            }
        },
        onInput(key) {
            this.password = (this.password + key).slice(0, 6);
            console.log(this.password);
            if (this.password.length === 6) {

                //验证密码是否正确
                this.$api.get('/other/check-num', {
                    pass: this.password
                }).then(res => {
                    this.openFuncListDoor()
                    this.show = false
                }).catch(e => {
                    //密码错误
                    console.log(e);
                    Toast('密码错误！')
                    this.password = ''
                })
            }
        },
        onDelete() {
            this.password = this.password.slice(0, this.password.length - 1);
        },
        /**
         * @function 设置当前时间的要做的事情
         */
        toSetTimeThing () {
            let alertMsg = ''
            if (!this.taskInfo.toSetThing) {
                alertMsg = '需要先输入安排！'
            }
            if (!this.showSetSthIndex) {
                alertMsg = '请先设置事件！'
            }
            console.log('我又被执行了')
            if (alertMsg) {
                this.$vux.toast.show({
                    text: alertMsg,
                    type: 'warn'
                })
                return false
            }
            this.setPlanInfo('/plan/set-plan-thing', {
                planId: this.showSetSthIndex,
                thing: this.taskInfo.toSetThing,
                planNum: Number(this.taskInfo.planNum)
            }).then(res => {
                this.$vux.toast.show({
                    text: '设置成功！'
                })
                this.showSetSth = false
            }).catch(e => {
                this.$vux.toast.show({
                    text: e.message,
                    type: 'warn'
                })
            })
        },
        arrange () {
            this.curSelectType = {
                name: '安排一下',
                rgb: '000',
                type: 'arrange'
            }
        }
    },
    created(){
        this.initData()
    },
    computed: {
        planList() {
            let minutes = 48
            let res = []
            for (let i = 0; i < minutes; i++) {
                res[i] = this.defaultBgc;
            }

            this.plans.length && this.plans.forEach((pItem, pIndex) => {
                let curIndex = Number(pItem['index'])

                this.eventTypes.forEach(item => {
                    if (item.id === pItem['eventId']) {
                        res[curIndex] = '#' + item.rgb
                    }
                })
            })
            
            return res
        },
        dataInfo() {
            let res = {}
            res.month = this.getMonthChinese(this.curTime.getMonth()) + '月'
            res.date = this.curTime.getDate()
            res.week = this.getWeekChinese(this.curTime.getDay())
            return res
        }
    }
}
</script>

<style lang="scss">
    .index{
        position: relative;
        .function-list{
            position: absolute;
            width: .8rem;
            background: #C1C1C1;
            top: 0.55rem;
            left: .02rem;
            border-radius: .02rem;
            padding: .05rem;
            z-index: 1001;
            transition: .2s;
            li{
                line-height: .3rem;
                font-size: 13px;
                border-bottom: 1px dashed #000;
                i{
                    margin-right: .02rem;
                }
            }
            &:before{
                content: ' ';
                display: block;
                position: absolute;
                top: -0.2rem;
                left: .3rem;
                border: .1rem solid transparent;
                border-bottom: .1rem solid #C1C1C1;
            }
        }
        .header{
            font-size: .16rem;
            line-height: .40rem;
            background-color: #EEF0F6;
            border-bottom: 1px solid #D6D8DD;
            text-align: center;
            padding: 0 .1rem;
            .time-icon{
                font-size: .2rem;
                float: right;
                position: relative;
                right: .2rem;
                /* margin-right: .2rem; */
            }
            .left{
                font-size: .2rem;
                float: left;
                position: relative;
                left: .2rem;
            }
        }
        .body{
            display: flex;
            width: 100%;
            margin-top: .01rem;
            .time-info{
                // background: #ff9;
                width: .45rem;
                color: #707070;
                margin-right: .05rem;
                .month{
                    font-size: .12rem;
                    line-height: .24rem;
                    text-align: right;
                }
                .day{
                    text-align: right;
                    font-size: .20rem;
                    font-weight: 700;
                }
            }
            .plan-list{
                // background: #99f;
                width: 2.23rem;
                display: flex;
                flex-wrap: wrap;
                overflow-y: auto;
                height: 100%;
                padding-bottom: .7rem;
                .index{
                    width: .2rem;
                    height: .3rem;
                    font-size: .12rem;
                }
                .item{
                    display: flex;
                    .plan-block{
                        background: #D6D8DD;
                        margin-bottom: .02rem;
                        width: 1rem;
                        height: .3rem;
                    }

                }
                .item:nth-child(odd){
                    margin-right: .02rem;
                }
            }
            .plan-type{
                flex: 1;
                // flex-grow:1;
                // background: #f99;
                // display: flex;
                // justify-content: center;
                // flex-wrap: wrap;
                text-align: center;
                .item{
                    width: .7rem;
                    height: .33rem;
                    // background: #f99;
                    background: #fff;
                    border: 1px solid #D6D8DD;
                    border-radius: .05rem;
                    margin-top: .1rem;
                    color: #fff;
                    outline: none;
                    text-overflow: ellipsis;
                    font-size: .12rem;
                    white-space: nowrap;
                    // margin-bottom: .1rem;
                }
                .current-select {
                    font-size: 14px;
                    color: #666;
                    margin-top: 16px;
                }
                .function-wrapper {
                    border: 1px solid #D6D8DD;
                    width: .7rem;
                    height: .33rem;
                    line-height: .33rem;
                    border-radius: .05rem;
                    margin: 0.15rem auto;
                }
            }
        }
    }
    .weui-dialog__title {
        font-size: .16rem !important;
    }

    .confirm-wrapper {
        .weui-cell {
            border: 1px solid #F3F3F3;
            border-radius: .1rem;
            margin-top: .1rem;
        }
        .weui-cell::before {
            display: none;
        }
    }

    @keyframes indexButton {
        0%,
        100% {
            transform: scale(1, 1);
        }
        25% {
            transform: scale(0.9, 1.1);
        }
        50% {
            transform: scale(1.1, 0.9);
        }
        75% {
            transform: scale(0.95, 1.05);
        }
    }
    .plan-block:hover {
        cursor: pointer;
        animation: indexButton 0.5s;
    }
</style>
